<template>
    <div>
        <headers />
        <div class="content">
            <div v-for="(items, indexs) in navList" :key="indexs" class="navList">
                <div class="mla"><span>{{ items.name }}</span></div>
                <div v-for="(item, index) in items.list" v-if="item.list" style="padding: 0 20px;">
                    <div class="ml"><span>{{ item.name }}</span></div>
                    <div class="cdList">
                        <div v-for="(itemi, indexi) in item.list" class="cditem">
                            <div @click="btnClick(itemi.url, itemi.type, itemi.appendixName, itemi.appendixUrl,itemi.name)">
                                <img :src="itemi.icon ? require('../../assets/image/btn/' + itemi.icon) : ''" alt="">
                                <p>{{ itemi.name }}</p>
                            </div>

                        </div>
                    </div>
                </div>
                <div class="cdList">
                    <div v-for="(item, index) in items.list" v-if="!item.list" class="cditem">
                        <div @click="btnClick(item.url, item.type, item.appendixName, item.appendixUrl,item.name)">
                            <img :src="item.icon ? require('../../assets/image/btn/' + item.icon) : ''" alt="">
                            <p>{{ item.name }}</p>
                        </div>

                    </div>
                </div>

            </div>

        </div>
        <!-- <el-button @click="open_miniapp" icon="el-icon-share" type="text">打开应用程序</el-button> -->
        <el-dialog title="扫描二维码查看模型" :visible.sync="dialogVisible" width="360px">
            <vue-qr :text="codeText" :size="300" style="margin: auto;"></vue-qr>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
            </span>
        </el-dialog>
</div>
</template>
<script>

import headers from '../../components/header/header.vue'
import axios from "axios";
import { getToken } from "@/utils/auth";
import { v4 as uuidv4 } from 'uuid'
import VueQr from 'vue-qr';
export default {
    components: {
        headers,
        VueQr
    },
    data() {
        return {
            navList: [],
            dialogVisible:false,
            codeText: 'https://app.modaiyun.com/embedded/1414784699708342272?viewport=false&autoplay=true&autorotate=false&hideTools=false&showBIM=false&showBBoxSize=false&showKooRender=false&showSettings=false',
            // lgoImg: require('../../assets/image/12.png'),
        }
    },
    created() {
        this.getNav();
    },
    methods: {
        getCode(codeImg) {
            // console.log('二维码图片', codeImg);
        },
        getNav() {
            // sessionStorage.setItem('menuList', JSON.stringify(this.navList));
            // sessionStorage.setItem('oneid', this.navList[0].menuId);
            this.Sevice({
                url: "sys/menu/nav",
                method: "get",
            })
                .then((res) => {
                    if (res && res.code == 200) {
                        sessionStorage.setItem("menuArr", JSON.stringify(res.menuList));
                        sessionStorage.setItem("menuList", JSON.stringify(res.permissions));
                        if (res.menuList.length) {
                            sessionStorage.setItem("oneid", res.menuList[0].menuId);
                        } else {
                            sessionStorage.setItem("oneid", "");
                        }
                        // console.log(res.menuList)
                        this.navList = res.menuList;
                    } else {
                        this.navList = [];
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
        btnClick(url, type, appendixName, appendixUrl,name) {
            if (type == 3) {
                // 弹窗
                console.log(url, type, appendixName, appendixUrl)
                this.dialogVisible=true
                if(name=='模型demo'){
                    this.codeText='https://app.modaiyun.com/embedded/1414784699708342272?viewport=false&autoplay=true&autorotate=false&hideTools=false&showBIM=false&showBBoxSize=false&showKooRender=false&showSettings=false'
                }else{
                    this.codeText=process.env.VUE_APP_BASE_API+'/developing'
                }
                
            } else {
                this.$router.push('/' + url)
            }

        },
        // 一键打开应用程序
        open_miniapp() {
            console.log(navigator.userAgent)
            // 检测用户的设备是否是Windows系统
            if (/windows|win32/i.test(navigator.userAgent)) {
                // 检测用户的浏览器是否能使用universalLink
                let openApp = false;
                let userAgent = navigator.userAgent
                //判断是否 Firefox浏览器
                if (userAgent.indexOf("Firefox") > -1) {
                    openApp = true;
                }
                //判断是否 Chrome浏览器
                if (userAgent.indexOf("Chrome") > -1) {
                    openApp = true;
                }
                //判断是否 Edge浏览器
                if (userAgent.indexOf("Edg") > -1) {
                    openApp = true;
                }
                if (openApp) {
                    try {
                        window.location.href = "universalLinks://";
                    } catch (err) {
                        console.log(err)
                        this.$message.warning("出错了，请手动打开小程序！")
                    }
                } else {
                    this.$message.warning("您的浏览器不支持自动打开小程序，请手动打开小程序！")
                    this.$notify.warning({
                        title: "提示",
                        content: "推荐使用Chrome浏览器！",
                        placement: "bottom-right",
                        duration: 3000
                    })
                }
            } else {
                this.$message.warning("您的设备暂不支持运行小程序，请在Windows电脑上进行操作！")
            }
        },


    }

}
</script>
<style scoped>
.content {
    padding: 40px 60px;
}

.ml {
    border-bottom: 1px solid #ccc;
}

.ml span {
    display: inline-block;
    border-bottom: 6px solid #1AB8B8;
    font-weight: 600;
    padding: 10px;
}

.mla {
    background-color: #f4f0f0;
}

.mla span {
    display: inline-block;
    border-left: 6px solid #1AB8B8;
    font-weight: 600;
    padding: 10px;
}

.navList {
    margin-bottom: 20px;
}

.cdList {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between; */
}

.cdList .cditem {
    width: 150px;
    cursor: pointer;
    /* margin-right: 100px; */
    margin-left: 20px;
    margin-right: 20px;
    margin-bottom: 10px;
}

/* .cdList div:nth-child(7n){
    margin-right: 0;
} */
.cdList img {
    margin: 0 auto;
    width: 60px;
    height: 60px;
}

.cdList p {
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
}
</style>